<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="../../favicon.ico" rel="shortcut icon" />
<link href="../../base.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../jquery/jquery.js" type="text/javascript"></script>
<script src="../../ux/jquery.ux.js" type="text/javascript"></script>
<link href="../../ux.button/jquery.ux.button.css" rel="stylesheet" type="text/css" media="screen" />
<script src="../../ux.button/jquery.ux.button.js" type="text/javascript"></script>
<title>jquery.ux.button</title>
</head><body>

<a href="./">&laquo; Index</a>

<style type="text/css">

#clipmenu span {
	float: left;
	}
#keypad .ux-button-content {
	width: 20px;
	text-align: center;
	padding: 0;
	height: 20px;
	line-height: 20px;
	}	
/* collapsing borders */
.center .ux-button-NW,
.center .ux-button-W, 
.center .ux-button-SW,
.right .ux-button-NW,
.right .ux-button-W,
.right .ux-button-SW {
	width: 0;
	}
.middle .ux-button-NW,
.middle .ux-button-N,
.middle .ux-button-NE,
.bottom .ux-button-NW,
.bottom .ux-button-N,
.bottom .ux-button-NE {
	height: 0;
	}	
.left .ux-button-NE,
.left .ux-button-SE,
.center .ux-button-NE,
.center .ux-button-SE,
.top .ux-button-SE,
.top .ux-button-SW,
.middle .ux-button-SE,
.middle .ux-button-SW {
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;
	}
.left .ux-button,
.center .ux-button {
	margin-right: 0;
	}
.center .ux-button,	
.right .ux-button {
	margin-left: 0;
	}
.top .ux-button,
.middle .ux-button {
	margin-bottom: 0;
	}
.middle .ux-button,
.bottom .ux-button {
	margin-top: 0;
	}
</style>

<script type="text/javascript">
jQuery(function($){
	$('#clipmenu span').button({
		type: "radio",
		name: "clipbuttons"
		});
	$('#keypad td').button();
	});
</script>

<h2>ux.button / collapse</h2>

<p>Borders can be collapsed with CSS to enhance logical groupings.</p>

<div id="clipmenu">
	<span class="left">Code</span>
	<span class="center">Split</span>
	<span class="right">Design</span>
	</div>

<br clear="all" />	&nbsp;

<table id="keypad" cellpadding="0" cellspacing="0">
	<tr class="top">
		<td class="left">1</td>
		<td class="center">2</td>
		<td class="right">3</td>
		</tr>
	<tr class="middle">
		<td class="left">4</td>
		<td class="center">5</td>
		<td class="right">6</td>
		</tr>
	<tr class="middle">
		<td class="left">7</td>
		<td class="center">8</td>
		<td class="right">9</td>
		</tr>
	<tr class="bottom">
		<td class="left">*</td>
		<td class="center">0</td>
		<td class="right">#</td>
		</tr>
	</table>

</body></html>